<template>
  <div class="home-container">
    <tab></tab>
    <div class="home-wrapper">
      <el-carousel trigger="click">
        <el-carousel-item v-for="item in carouselImg" :key="item.id">
          <div class="img-bg" :style="{backgroundImage: `url(${item.httpUrl})`}"></div>
        </el-carousel-item>
      </el-carousel>
      <div class="home-content-wrapper base-width">
        <div class="home-content">
          <div class="content-left">
            <home-left :typeId.sync="typeId" :typeList="typeList"></home-left>
          </div>
          <div class="content-center">
            <home-center :typeId="typeId"></home-center>
          </div>
          <div class="content-right">
            <home-right></home-right>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  // @ is an alias to /src
  import homeLeft from '../../components/home/home-left/home-left'
  import homeCenter from '../../components/home/home-center/home-center'
  import homeRight from '../../components/home/home-right/home-right'
  import tab from '../../base/tab/tab'
  import Footer from '../../base/footer/Footer'
  import { getCarouselImg, getTypeList} from "../../api/home";
  import { ERROR_NO } from "../../util/config";
  import {messageMixin} from "../../common/js/mixin";
  import {mapMutations} from 'vuex'

  export default {
    mixins: [messageMixin],
    name: 'Home',
    data () {
      return {
        carouselImg: [],
        show: false,
        typeList: [],
        chatRoom: [],
        typeId: '',
        contentId: ''
      }
    },
    methods: {
      _getTypeList () {
        getTypeList().then(res => {
          if (res.code === ERROR_NO) {
            this.typeList = res.data.typeList
            this.typeId = this.typeList[0].id
            this.setTypeId(this.typeId)
            return
          }
          this._messge({
            message: res.message
          })
        })
      },
      _getCarouselImg () {
        getCarouselImg().then(res => {
          if (res.code === ERROR_NO) {
            this.carouselImg = res.data.CarouseImg
            return
          }
          this._messge({
            message: res.message
          })
        })
      },
      // _getSocketRoom() {
      //   getSocketRoom().then(res => {
      //     if (res.code === ERROR_NO) {
      //       this.chatRoom = res.data.room.reverse()
      //       const firstInfo = this.chatRoom[0] || {}
      //       this.$refs.chatroom.init = true
      //       this.$refs.chatroom.inChat(firstInfo.id, firstInfo.roomName)
      //     }
      //   })
      // },
      ...mapMutations({
        setTypeId: 'SET_TYPE_ID'
      })
    },
    created () {
      this._getCarouselImg()
      this._getTypeList()
      // this._getSocketRoom()
    },
    components: {
      homeLeft,
      homeRight,
      homeCenter,
      tab,
      Footer
    }
  }
</script>

<style lang="scss">
  @import "../../common/scss/variable";
  .el-carousel__container {
    height: 383px !important;
  }
  .img-bg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .home-content-wrapper {
    padding: 25px 14px 0;
    box-sizing: border-box;

    .home-content {
      display: grid;
      grid-template-columns: 7.6fr 65fr 25fr;
      grid-column-gap: 10px;
      margin: 0 auto;
    }
  }
</style>
